<template>
    <div>
        <el-header class="header-wrapper">
            <div class="logo">
                <img src="../../assets/image/logo.png">
            </div>
            <div class="logoText">
                <img src="../../assets/image/logot1.png">
            </div>
        <div class="menu">
            <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect" router
                     background-color="rgb(22, 22, 22)" text-color="rgb(256,256,256,0.5)" active-text-color="#f599ae">
                <el-menu-item index="/customer/home/init">首页</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">订单管理</template>
                    <el-menu-item index="/customer/order/new">未发货订单</el-menu-item>
                    <el-menu-item index="/customer/order/doing">已发货订单</el-menu-item>
                    <el-menu-item index="/customer/order/done">已收货订单</el-menu-item>
                </el-submenu>
                <el-menu-item index="/customer/massage/massage">消息中心</el-menu-item>
                <el-submenu index="5">
                    <template slot="title">个人中心</template>
                    <el-menu-item index="/customer/personal/car">购物车</el-menu-item>
                    <el-menu-item index="/customer/personal/scanRecord">浏览历史</el-menu-item>
                    <el-menu-item index="/customer/personal/information">信息管理</el-menu-item>
                    <el-menu-item @click="exit()">退出</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </el-header>
    </div>
</template>

<script>
    export default {
        name: "cliTitleCustomer",
        methods: {
            /**
             * @description: 单击退出按钮触发该方法
             * @param {无 }
             * @return:跳转至登陆页面
             */
            exit () {
                this.$confirm('确认退出吗?', '提示', {
                }).then(() => {
                    this.$router.push('/')
                    // this.$store.commit('log_out') // 退出清空sessionStorage
                }).catch(() => { })
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>
    .header-wrapper {
        width: 100%;
        height: 20%;
        background-color: rgb(22, 22, 22);
        position: fixed;
        overflow-y: hidden;
        z-index: 3;
    }
    .logo {
        float: left;
        margin-top: 5px;
    }
    .logoText {
        float: left;
        margin-top: 10px;
    }
    .menu{
        float: right;
        margin-top: 0px;
        margin-right: 0px;
    }
</style>
